<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .container {
            width: 600px;
            border: 1px solid #f66;
            border-radius: 5px;
            padding: 10px;
            margin: 50px auto;
        }

        .item {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid gray;
            font-weight: 900;
        }

        .item button {
            float: right;
            margin-top: 12px;
        }

        header input {
            width: 574px;
            height: 30px;
            padding-left: 20px;
            outline: none;
        }

        header input:focus {
            border-color: rgba(255, 0, 0, 0.6);
            box-shadow: 0 0 5px red;
        }

        footer {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            margin-top: 10px;
        }

        footer button {
            float: right;
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class="container">
            <!-- 使用组件时，监听自定义事件 事件名叫 add -->
            <itemnav @add="addItem"></itemnav>

            <!-- @deleteitem="deleteItem" 监听自定义事件 deleteitem -->
            <itemcom v-for="item in list" @deleteitem="deleteItem" :key="item.id" :item="item"></itemcom>

            <footer>
                <label for=""><input type="checkbox" v-model="isChecked"></label>
                <span>
                    <span> 已完成 {{isCount}} 件 </span>
                    /
                    <span> 总计 {{ this.list.length }} 件 </span>
                </span>
                <button @click="delList">清除已完成</button>
            </footer>
        </div>

    </div>
</body>

<template id="nav">
    <header>
        <input type="text" v-model="title" placeholder="请输入待办事件" @keydown.enter="add">
    </header>
</template>

<template id="item">
    <!-- :style="{backgrountColor: bgColor}" 插入属性样式 -->
    <!-- @mouseenter="delShow(true)" 监听鼠标移入 -->
    <!--  @mouseleave="delShow(false)" 监听鼠标移除 -->
    <div class="item" :style="{backgroundColor: bgColor}" @mouseenter="delShow(true)" @mouseleave="delShow(false)">
        <input type="checkbox" v-model="item.is">
        {{ item.title }}
        <button v-show="isShowDel" @click="del(item.id)">删除</button>
    </div>
</template>
<script>
    const app = Vue.createApp({
        data () {
            return {
                list: [
                    { id: '873952508589', is: false, title: '美美的睡上一觉' },
                    { id: '247029842948', is: true, title: '开心的吃大餐' },
                    { id: '128389234723', is: false, title: '再美美的睡上一觉' }
                ]
            }
        },
        computed: {
            isCount () {
                return this.list.reduce((total, item) => {
                    // total 上一次的值，加上 (item.is(标记被选中) ? 1 : 0)
                    return total + (item.is ? 1 : 0)
                    // 设置初始值为 0  
                }, 0)
            },
            isChecked: {
                get () {
                    // 设置我们已经选中的数量和总数量做对比，如果相等那么就是全选了
                    return this.isCount == this.list.length ? true : false
                },
                set (value) {
                    // console.log(value);
                    // 遍历出所有内容，将 is 属性设置为当前是否选中
                    this.list.forEach(item => {
                        item.is = value
                    })
                }
            }
        },
        methods: {
            // 父组件的接收方法
            addItem (value) {
                // console.log('接收title', value);
                // 将接收的内容添加到数组 list 中

                // 在数组中添加一个元素
                this.list.unshift({
                    title: value,
                    is: false,
                    id: Math.random()
                })
            },
            // 父组件中定义一个删除单条数据的方法
            deleteItem (itemId) {
                // console.log('id', itemId);
                // 删除单条数据
                this.list = this.list.filter(item => item.id != itemId)
            },
            delList () {
                // 删除掉符合条件的元素
                for (let i = this.list.length - 1; i >= 0; i--) {
                    if (this.list[i].is) {
                        // 需要删除
                        this.list.splice(i, 1)
                    }
                }
            }
        },
    })


    app.component('itemnav', {
        template: '#nav',
        data () {
            return {
                title: ''
            }
        },
        methods: {
            add () {
                // console.log(this.title);
                // 触发事件,触发监听的 add 事件，且将 title 传递过去
                this.$emit('add', this.title)
                this.title = ''
            }
        }
    })


    app.component('itemcom', {
        template: '#item',
        props: ['item'],
        data () {
            return {
                isShowDel: false,
                bgColor: '#fff'
            }
        },
        methods: {
            delShow (isShow) {
                // 记录是否需要显示删除按钮
                this.isShowDel = isShow
                this.bgColor = isShow ? '#f5f5f5' : '#fff'
            },
            // 定义一个删除的方法
            del (id) {
                // 给父组件传一个要删除掉的 id 
                this.$emit('deleteitem', id)
            }
        }
    })

    app.mount('#app')
</script>

</html>